<template>
  <div class="homepage-header">
    <h3>叩丁狼客户管理系统</h3>
    <i class="el-icon-menu"></i>
    <p class="homepage-header-user">
      <el-dropdown trigger="click" @command="handleCommand">
        <span class="homepage-username">
          下拉菜单
          <i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </p>
  </div>
</template>

<script>
export default {
  methods: {
    handleCommand(command) {
      console.log(command);
      if (command == "logout") {
        // 退出登录（调用接口，清除存储空间里面用户相关的信息，并且跳到登录页面）
      }
    }
  }
};
</script>

<style lang="less" scoped>
.homepage-header {
  height: 70px;
  line-height: 70px;
  background-color: #409eff;
  color: #fff;
  h3 {
    padding: 0 20px;
    display: inline-block;
    font-size: 24px;
  }
  .homepage-header-user {
    margin-right: 20px;
    float: right;
    .homepage-username {
      color: #fff;
    }
  }
  .el-icon-menu {
    font-size: 20px;
  }
}
</style>